import React from "react";
import {SearchPanel} from "./search-panel";
import {List} from "./list";
import {useEffect, useState} from "react";
import { cleanObject,useDebounce,useDocumentTitle,useMount } from "views/utils";
import { useHttp } from "views/utils/http";
import styled from "@emotion/styled";
import { Typography } from "antd";
import { useProject } from "views/utils/project";
import { useUsers } from "views/utils/user";
import { Helmet } from "react-helmet";

export const ProjectListView = () => {

    const [param, setParam] = useState({
        name:'',
        personId:''
    })

    const debouncedParam = useDebounce(param, 2000)
    const {isLoading, error, data: list} = useProject(debouncedParam)
    const { data:users } = useUsers()
    useDocumentTitle('项目列表',false)
    
    return (
        <Container>
            <h1>项目列表</h1>
             <SearchPanel users={users || []} param={param} setParam={setParam}/>
             { error ? <Typography.Text type="danger">{error.message}</Typography.Text> : null}
             <List dataSource={list || []} users={users || []} loading={isLoading}/>
        </Container>
    )
}

const Container = styled.div`
    padding: 3.2rem;
`